<template>
	<view class="uni-flex uni-column">
		<view>
			<gov-head></gov-head>
		</view>
		<view>
	        <uni-nav-bar color="#333333" background-color="#FFFFFF" 
	        fixed="false" right-icon="more" :title="currentCommunity.label"
			 @click-right="more">
				<block slot="left">
					<view class="city">
						<text>社区</text>
					</view>
				</block>
				
			</uni-nav-bar>
		</view>
		
		<view>
			<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item v-for="(item, index) in gov.toppic" :key="index">
					<image class="image"  :src="item.img" 
					:style="{width: '100%', height: '170px'}"
					 />
				</swiper-item>
			</swiper>
		</view>

		<view class="uni-list">
			<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value,key) in gov.articleList" :key="key">
				<view class="uni-list-cell-navigate uni-navigate-right uni-media-list ">
					<view class="uni-media-list-logo">
						<image :src="value.img"></image>
					</view>
					<view class="uni-media-list-body">
						<view class="uni-media-list-text-top">{{value.title}}</view>
						<view class="uni-media-list-text-bottom uni-ellipsis">{{value.content}}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="flex-item flex-item-V mb5 bgwhite">
			<view class="uni-flex uni-row">
			<view class="t_left uni-title">
				社区政务服务
			</view>

			<view class="t_right">
				<button type="default" class="mr10" size="mini">证明打印</button>
				<button type="default" size="mini">服务检索</button>
			</view>
			</view>
		</view>
        
		<view class="flex-item flex-item-V mb5"
		v-for="(item, index) in gov.service" :key="index"
		>
			<gov-list :obj="item"></gov-list>
		</view>

		<!-- #ifdef H5 -->
		<view class="footer"></view>
		<!-- #endif -->
	</view>
</template>
<script>

import http from '@/common/http';
import util from '@/common/util';
import govHead from '@/govcomponents/page-head.vue';
import govList from '@/govcomponents/gov-list.vue';
import uniNavBar from '@/components/uni-nav-bar.vue'
import uniIcon from '@/components/uni-icon.vue'

import { mapGetters, mapActions } from 'vuex'

export default {
	data() {
		return {

			gov : {},
			communityList : [],

			currentCommunity : {},

			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500,
		}
	},
	computed : {
		...mapGetters([
			'URL',
      	]),
	},
	async onLoad() {

		const userInfo = await this.getUserInfo();
		console.log(userInfo);

		//轮播图
		http({
			mock : 1,
			fun : 'gov',
			cb : res => {
				console.log(res);
				this.gov = res;
				//处理轮播图
				for(let i = 0; i < this.gov.toppic.length; i++){
					let tmp = this.gov.toppic[i];
					tmp['img'] = util.changeImg(tmp.url, 'normal');
				}
			}
		});

		//社区列表
		http({
			mock : 1,
			fun : 'communityList',
			cb : res => {
				console.log(res);
				this.communityList = res;
				this.currentCommunity = res[0];
			}
		});

	},
	
	methods: {
		...mapActions(['getUserOpenId', 'getUserInfo']),

		more () {
			console.log('more');
			uni.navigateTo({
				url: '/pages/search/search',
			})
		},
	},

	components : {
		govHead,
		govList,
		uniNavBar,
		uniIcon,
	},

}
</script>

<style scope>
.city {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-left:8px;
}	

.footer {
	height: 100upx;
}

.t_left {
	width: 30%;
	padding-left: 20upx;
}
.t_right {
	padding-top: 15upx;
	padding-right: 10upx;
	width: 70%;
	text-align: right;
}
</style>
